﻿@page "/MainPage"
@using CardMaker.Library.Services
@using Microsoft.JSInterop
@using CardMaker.Library.Models
@inject ICardTemplateService _cardTemplateService
@inject ISideImageStorage _sideImageStorage
@inject ICardTemplateStorage _cardTemplateStorage
@inject IJSRuntime _jsRuntime
@inject ICardImageToUrlService _cardImageToUrlService
@inject IFrameImageStorage _frameImageStorage
@inject ICreateCardService _createCardService
@if (_isLoading) {
    <h1><Spinner></Spinner></h1>
} else {
    <Layout ShowFooter="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Main>
            <div class="text-center main">
                <ListView TItem="FrameAndCardtemplate"
                          Items="@frameAndCardtemplateList"
                          OnListViewItemClick="OnListViewItemClick">
                    @*<ListView TItem="FrameAndCardtemplate"
                          Items="@frameAndCardtemplateList">*@
                    <HeaderTemplate>
                        <div>模板列表</div>
                    </HeaderTemplate>
                    <BodyTemplate>
                        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
                            <Card Color="Color.Primary"
                                  IsCenter="true">
                                <HeaderTemplate>
                                    <div class="lv-demo-desc">@context.cardTemplate.TemplateName</div>
                                </HeaderTemplate>
                                <BodyTemplate>
                                    <div class="images-item">
                                        <ImageViewer Url="@context.frmaeUrl"
                                                     FitMode="ObjectFitMode.Contain" />
                                    </div>
                                </BodyTemplate>
                            </Card>
                        </div>
                    </BodyTemplate>
                </ListView>
            </div>
        </Main>
    </Layout>
}